.header-top {
  background: rgba(255, 0, 0, 0.2);
  height: 245px !important;
  background: url("../img/zhongPing/titlle.png") no-repeat;
}

p {
  margin: 0;
}

#main {
  position: relative;

  .impressions {
    position: absolute;
    top: 0;
    left: 0;

    .bg-li {
      padding-left: 20px;

      .panel-01 {
        padding-top: 0;
        border: none;
        background-image: none;
        .panel-bodys {
          border: 1px solid #0063D8;
          border-top: none;
          height: 90%;
          padding: 0;
          .continer-divs{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }

          .continer-div {

            height: 100%;
            background-image: linear-gradient(to bottom, transparent 0%, rgba(12, 55, 191, 0.2) 100%);


            .one-fourth {
              display: grid;
              grid-template-columns: repeat(2, 48%);
              justify-content: center;
              gap: 10px;
              height: 50%;
              align-content: space-evenly;

              .box {
                display: flex;
                padding-left: 5px;
                position: relative;
                z-index: 99999;


                .text {
                  padding-left: 10px;

                  p:nth-child(1) {
                    color: #CFDFFF;
                    font-family: PingFang SC;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    text-align: center;
                    white-space: nowrap;
                  }

                  p:nth-child(2) {
                    text-align: center;
                    background: linear-gradient(180deg, #FFF 0%, #0EC5FF 100%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-family: DINPro;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                  }
                }

                img {
                  width: 35px;
                  height: 35px;
                }

                &:nth-child(2) {
                  .text {
                    p:nth-child(2) {
                      background: linear-gradient(180deg, #FFF 0%, #23D38B 100%);
                      background-clip: text;
                      -webkit-background-clip: text;
                      -webkit-text-fill-color: transparent;
                    }
                  }
                }

                &:nth-child(3) {
                  .text {
                    p:nth-child(2) {
                      background: linear-gradient(180deg, #FFF 0%, #EFC83D 100%);
                      background-clip: text;
                      -webkit-background-clip: text;
                      -webkit-text-fill-color: transparent;
                    }
                  }
                }

                &:nth-child(4) {
                  .text {
                    p:nth-child(2) {
                      background: linear-gradient(180deg, #FFF 0%, #F6953C 100%);
                      background-clip: text;
                      -webkit-background-clip: text;
                      -webkit-text-fill-color: transparent;
                    }
                  }
                }
              }


              .box {


              }
            }
            #case{
              //margin-top: 28px;
            }
            .box {
              display: grid;
              grid-template-columns: repeat(2, 45%);
              //padding-top: 20px;
              height: 60px;
              justify-content: center;
              justify-items: center;
              align-items: center;

              .div-bgs {
                width: 80%;
                height: 38px;
                cursor: pointer;
                border: 1px solid #37618c;
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;

              }

              .acriveClass {
                border: 1px solid #0EC5FF;
                position: relative;
                &:before{
                  content: url("../img/zhongPing/Polygon 1.png") ;
                  transform: scale(2);
                  position: absolute;
                  left: -17px;
                }
                &:after{
                  content: url("../img/zhongPing/Polygon 1.png") ;
                  //transform: scale(2) rotate(180);
                  transform:  scale(-2,2);
                  position: absolute;
                  right: -17px;
                }
              }
            }
            .grid-box{
              display: grid;
              grid-template-columns: repeat(3,30%);
              gap: 10px;
              justify-content: center;
              justify-items: right;
              margin-top: 10px;
              .grid-box-div{
                background: url("../img/zhongPing/div-bg.png") no-repeat;
                width: 100%;
                height: 70px;
                .bigs{
                  background: url("../img/zhongPing/imgs.png") no-repeat;
                  height: 60px;
                }
              }


            }
            .grid-boxs{
              height: 100%;
              width: 100%;
              display: grid;
              grid-template-columns: repeat(2,49%);
              //gap: 10px;
              justify-content: center;
              justify-items: right;
              margin-top: 10px;
              .grid-box-div{
                background: url("../img/zhongPing/div-bg.png") no-repeat;
                width: 90%;
                background-size: contain;
                height: 90%;
                .bigs{
                  background: url("../img/zhongPing/imgs.png") no-repeat;
                  height: 100%;
                  background-size: contain;
                }
              }

            }
            .title-boxs {
              display: flex;
              justify-content: center;

              .title-p {
                color: #CFDFFF;
                text-align: center;
                font-family: PingFang SC;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                padding: 10px 20px;
                display: inline-block;
                text-align: center;
                position: relative;

              }

              .title-p::before {
                content: '';
                position: absolute;
                width: 3px;
                height: 10px;
                background: #0EC5FF;
                left: 7px;
                top: 15px;
              }

              .title-p::after {
                content: '';
                position: absolute;
                width: 3px;
                height: 10px;
                background: #0EC5FF;
                right: 7px;
                top: 15px;
              }
            }
            .box-prokrt {
              display: flex;
              justify-content: space-evenly;
              height: 90px;

              .img-box {
                display: flex;
                align-items: center;
                position: relative;
                transform: scale(0.7);

                .clearfix {
                  position: absolute;
                  top: 20px;
                  left: 24px;
                  color: #EAF4FF;
                  font-family: DINPro;
                  font-size: 30px;
                  font-style: normal;
                  font-weight: 700;
                  line-height: normal;
                }
              }
            }
            .aside-bar {
              margin-left: -7px;
              transform: scale(0.7);
              height: 100%;
              margin-top: -33px;
              div {
                width: 48px;
                height: 126px;
                background: url(../img/right/aside.png) no-repeat;
                background-size: 100% 100%;
                padding: 0px 13px;
                display: flex;
                align-items: center;
                color: #bfe0ff;
                font-size: 20px;
              }
              .active {
                background: url(../img/right/asideactive.png) no-repeat;
                background-size: 100% 100%;
              }
            }
            .shoot-list {
              display: grid;
              grid-template-columns: repeat(3,33%);
              justify-content: space-between;
              flex-wrap: wrap;
              .shoot-item {
                width: 160px;
                height: 94px;
                background: url(../img/right/icon1.png) no-repeat;
                background-size: 100% 100%;
                padding-left: 20px;
                transform: scale(0.8);
                .num {
                  font-weight: 700;
                  font-size: 24px;
                  //文字渐变
                  background: -webkit-linear-gradient(
                          180deg,
                          rgba(232, 197, 72, 1) 0%,
                          rgba(255, 255, 255, 1) 100%
                  );
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }
                .unit {
                  color: #e7efff;
                  font-weight: 400;
                }
                .per {
                  color: #e7efff;
                  font-size: 18px;
                  font-weight: 400;
                  margin-top: 10px;
                }
                &:nth-child(2n) {
                  background: url(../img/right/icon2.png) no-repeat;
                  background-size: 100% 100%;
                  .num {
                    background: -webkit-linear-gradient(
                            180deg,
                            rgba(146, 253, 253, 1) 0%,
                            rgba(255, 255, 255, 1) 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }
                }
              }
            }
          }
          .continer-dive{
            display: flex;
          }

        }
      }

      .panel-header-title {
        background: url("../img/index/header-div.png")  center/100% no-repeat;
        height: 100%;
        color: #FFF;
        text-shadow: 0px 2px 0px #003D52;
        font-family: YouSheBiaoTiHei;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 1px;
        padding-left: 20px;
        line-height: 36px;
        display: flex;
        align-items: center;
      }
    }

  }


}
.clearfix-box {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  grid-template-rows: repeat(2,50%);
  height: 150px;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #37618c;
  .box-continerE{
   text-align: center;

  }

  background-image: linear-gradient(to bottom, transparent 0%, rgba(12, 55, 191, 0.2) 100%);

}
.continer-divsd{
  padding: 10px 0;
  border: 1px solid #0063D8;
  background-image: linear-gradient(to bottom, transparent 0%, rgba(12, 55, 191, 0.2) 100%);
}
.felx-box-zong{
  padding: 10px;
  .title-p{
    display: flex;
    justify-content: center;
    p{
      transform: skewX(342deg);
      text-align: center;
      margin: 0 10px;
      min-width: 90px;
      padding: 10px;
      border: 1px solid #4B9EFF;
      background: linear-gradient(270deg, #0068A3 17.84%, #003467 92.11%);
    }
  }

}
